<script>
import { mapStores } from 'pinia'
import { useBaseStore } from '../stores/useBaseStore.js'
import { loadUserMenus } from '../api/index.js'

export default {
    data(){
        return{
            menus:[]
        }
    },



  computed: {
    ...mapStores(useBaseStore),
  },
  methods: {
    async initMenus() {
      let data = await loadUserMenus()
      this.menus = data;
      this.baseStore.menus = data
    },


    loginOut() {
      this.baseStore.clearLoginData()
      this.$router.push('/login')
    },
  },
  mounted() {
    if (this.$route.path == '/home') {
       this.$router.replace(this.baseStore.menus[0].right_path)
    }
  },
  created() {
    this.initMenus()
  },
}
</script>

<template>
    <el-container class="home-box">
        <el-header>
            <!-- 头部 -->
            <div><img class="logo" src="../assets/img/logo.png"><span class="title">教务选课系统</span></div>
            <div class="right"><img src="../assets/img/user.jpg">
                <el-dropdown>
                    <div>
                        <span>admin</span>
                        <el-icon>
                            <eparrow-down />
                        </el-icon>
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="loginOut()">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <el-container  class="page-box">
            <!-- 左 -->
            <!-- <el-aside width="200px">
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>管理员首页</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>系管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>专业管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>班级管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="/home/admin/class">
                        <el-icon><ep-document /></el-icon>
                        <span>学生管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>教师管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>课程管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>选课管理</span>
                    </el-menu-item>
                </el-menu>
                <el-menu background-color="#324157" text-color="#fff" router :default-active="$route.path">
                    <el-menu-item index="2">
                        <el-icon><ep-document /></el-icon>
                        <span>管理员管理</span>
                    </el-menu-item>
                </el-menu>
            </el-aside> -->

            <el-aside width="200px">
        <el-menu
          background-color="#324157"
          text-color="#fff"
          active-text-color="#20a0ff"
          :default-active="$route.path"
          router
        >
          <el-menu-item v-for="m in baseStore.menus" :key="m.right_id" :index="m.right_path">
            <el-icon v-html="m.right_icon"></el-icon>
            <span>{{ m.right_name }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

            <!-- 主要 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<style scoped>
.title {
    color: white;
    vertical-align: middle;
    margin-left: 18px;
}

.el-header {
    background-color: #242F42;
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 48px;
    margin-top: 6px;
    vertical-align: middle;
}

.right>img {
    width: 48px;
    margin-top: 6px;
    border-radius: 50%;
}

.el-dropdown {
    color: white;
    margin-top: 18px;
    margin-left: 18px;
}

.el-aside{
    background-color: #324157;
}

.home-box{
    height: 100%;
}

.page-box {
  height: 100%;
  overflow: hidden;
}
</style>